<template>
  <transition name="fade">
    <div
      :class="classes"
      v-if="fullscreenVisible && show">
      <div :class="mainClasses">
        <template v-if="type === 'circular'">
          <svg
            :class="typeClasses"
            viewBox="25 25 50 50">
            <circle
              :class="circularClasses"
              cx="50"
              cy="50"
              r="16"
              fill="none"
              stroke-width="3"
              stroke-miterlimit="10"></circle>
          </svg>
        </template>

        <template v-else>
          <div :class="typeClasses"></div>
        </template>
        
        <div :class="textClasses">
          <slot>
          </slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { getCurrentInstance } from 'vue';
import { oneOf } from '../../utils/assist';
import ScrollbarMixins from '../modal/mixins-scrollbar';

const prefixCls = 'haloe-spin';

export default {
  name: 'Spin',
  mixins: [ ScrollbarMixins ],
  props: {
    size: {
      validator (value) {
        return oneOf(value, ['small', 'large', 'mini', '', 'middle']);
      },
      default () {
        const global = getCurrentInstance().appContext.config.globalProperties;
        return !global.$HALOE || global.$HALOE.size === '' ? '' : global.$HALOE.size;
      }
    },
    type: {
      validator (value) {
        return oneOf(value, ['circular', 'three_dot']);
      },
      default () {
        return 'circular';
      }
    },
    color: {
      validator (value) {
        return oneOf(value, ['gray', '', 'white', 'blue']);
      },
      default () {
        return 'blue';
      }
    },
    fix: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      showText: false,
      // used for $Spin
      visible: false
    };
  },
  computed: {
    classes () {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-${this.size}`]: !!this.size,
          [`${prefixCls}-fix`]: this.fix,
          [`${prefixCls}-show-text`]: this.showText,
          [`${prefixCls}-fullscreen`]: this.fullscreen,
          [`${prefixCls}-${this.color}`]: this.color === 'white'
        }
      ];
    },
    mainClasses () {
      return `${prefixCls}-main`;
    },
    typeClasses () {
      return this.type === 'circular' ? [`${prefixCls}-type-circular`, `${prefixCls}-type`] : [`${prefixCls}-three-dot`]
    },
    circularClasses () {
      return [
        `${prefixCls}-main-path`,`${prefixCls}-${this.color}`
      ]
    },
    textClasses () {
      return `${prefixCls}-text`;
    },
    fullscreenVisible () {
      if (this.fullscreen) {
        return this.visible;
      } else {
        return true;
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.addScrollEffect();
      } else {
        this.removeScrollEffect();
      }
    }
  },
  mounted () {
    this.showText = !!this.$slots.default && this.$slots.default().some(item => item.children && item.children.length);
  }
};
</script>
